<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="<%=basePath%>static/css/jquery-ui.min.css" />
<link href="<%=basePath%>static/css/common_css.css" rel="stylesheet" />
<link href="<%=basePath%>static/css/center.css" rel="stylesheet" />
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>static/js/queryOrder.js"></script>
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-ui.min.js"></script>
<title>已完成订单</title>
<script type="text/javascript">
$(function(){
	$("#startDate").datepicker({
		changeYear: true,
		changeMonth: true,
  		maxDate:$("#endDate").val(), 
  		minDate: '-6m',
		dateFormat: 'yy-mm-dd'
	});
	$("#endDate").datepicker({
		changeYear: true,
		changeMonth: true,
  		maxDate: 15, 
  		minDate: $("#startDate").val(),
		dateFormat: 'yy-mm-dd'
	});
	$("#querymyorderbutton").click(function(){
		var end = $("#endDate").val();
		var start = $("#startDate").val();
		if(start !="" && end!="") {
			$("#queryOrderForm").submit();
		} else {
			alert("日期不能为空");
		}
	});
});

	function returnTicket(detailId){
		$.ajax({
			url:"<%=basePath%>order/returnTicket",
			type:"post",
			data:{detailId:detailId},
			success:function(data) {
				if(data) {
					alert("退款成功");
					$("#flag_"+detailId).text("已退款");
					$("#return_"+detailId).empty();
				} else {
					alert("退款失败");
				}
				
			}	
		});
	}
	
	function gotoTicket(detailId){
		$.ajax({
			url:"<%=basePath%>order/gotoTicket",
			type:"post",
			data:{detailId:detailId},
			success:function(data){
				if(data){
					alert("恭喜您，出行成功！");
					$("#flag_"+detailId).text("已出行");
					$("#return_"+detailId).empty();
				}else{
					alert("出行失败！")
				}
			}
		});
	}
	
	function deleteTicket(detailId){
		$.ajax({
			url:"<%=basePath%>order/deleteTicket",
			data:{detailId:detailId},
			type:"post",
			success:function(data){
				if(data){
					alert("删除成功！");
					$("#flag_"+detailId).text("已删除");
					$("#return_"+detailId).empty();
				}else{
					alert("删除失败！")
				}
			}
		});
	}
</script>
</head>
<body>
<h2 style="text-align: center; font-family: 楷体;">付款订单管理</h2>
<br>
			<form id="queryOrderForm" method="post" action="<%=basePath %>order/comOrder"
				enctype="application/x-www-form-urlencoded">
				<div class="order-tab">
					<div class="order-tab-hd">
						<ul>
							<li <c:if test="${search.orderFlag==1 }">class="active"</c:if>  id="query_G"><a href="#" shape="rect">未出行订单</a>
							</li>
							<li <c:if test="${search.orderFlag==2 }">class="active"</c:if>  id="query_H"><a href="#" shape="rect">历史订单</a></li>
						</ul>
					</div>
					<div class="order-tab-bd">
						<div style="display: block" class="item">
							<a id="querymyorderbutton" class="btn92s fr" href="#nogo"
								shape="rect"><label style="cursor: pointer;"
								for="querybutton">查询</label> </a> 
								<span id="use_G" <c:if test="${search.orderFlag==2 }"> style="display:none;"</c:if>><select
								name="type" id="typeChange"><option value="1"  <c:if test="${search.type==1}">selected="selected"</c:if> >按订票日期查询</option>
									<option value="2" <c:if test="${search.type==2}">selected="selected"</c:if>>按乘车日期查询</option>
							</select> </span> 
							<span><label for="orderdate">
										<c:if test="${search.orderFlag==1 }">查询日期</c:if>
										<c:if test="${search.orderFlag==2 }">乘车日期</c:if>
										</label> </span> 
							<span><input
								name="startDate" id="startDate" value='<fmt:formatDate value="${search.startDate }" pattern="yyyy-MM-dd" />'
								readonly="readonly" type="text"> -<input
								name="endDate" readonly="readonly" value='<fmt:formatDate value="${search.endDate }" pattern="yyyy-MM-dd" />'
								id="endDate" type="text" > </span> 
						</div> <input name="pageNum" id="pageNum"  type="hidden" value="${search.pageNum }">
									<input name="orderFlag" id="orderFlag"  type="hidden" value="${search.orderFlag }">
					</div>
				</div>
				<div class="order-line"></div>
			</form>
			<div id="loading"></div>
					<c:choose>
						<c:when test="${page.list.size()==0}">
								<!-- 未查询出数据开始   -->
								<div class="no-ticket-w" id="noticketlist" >
									<div class="no-ticket">
										<span class="i-no"></span>
										<p>
											您没有对应的订单内容，您可以通过<br clear="none"> <a href="<%=basePath %>order/searchTickets" target="_blank"
												id="book_ticket_id" shape="rect">车票预订</a> 功能，来制定出行计划。
										</p>
									</div>
								</div>
								<!-- 未查询出数据结束   -->
						</c:when>
						<c:otherwise>
							<!-- 查询出数据开始  -->
							<div id="orderinfobodyTable" style="display: block;">
								<c:forEach items="${page.list }" var="order" varStatus="status">
								<form id="query_order_form_${order.orderId }">
									<div class="order-item <c:if test="${status.count>1 }" >close</c:if>" name="order_item"  
											id="order_item_${order.orderId }">
										<div class="order-item-hd" id="order-item-hd_${order.orderId }"
											onmouseover="javascript:changeBackboundColor('${order.orderId }','onmouseover')"
											onmouseout="javascript:changeBackboundColor('${order.orderId }','onmouseout')">
											<div class="fl"
												onclick="javascript:showOrderInfoList('${order.orderId }');">
												<span class="icon-btn" id="icon-btn_${order.orderId }"></span>
												<div class="time">
													订单日期：<strong><fmt:formatDate value="${order.orderDate }" pattern="yyyy-MM-dd" /> </strong>
												</div>
												<div class="per-s">
												</div>
												<div class="place">
													<strong>${order.ticket.startStation }</strong> <b class="dc"></b> <strong>${order.ticket.endStation }</strong>
												</div>
												<div class="time2">
													乘车日期：<strong><fmt:formatDate value="${order.startTime }" pattern="yyyy-MM-dd HH:mm:ss" /> </strong>
												</div>
											</div>
											 <i class="new"></i>
										</div>
										<div class="order-item-bd" id="order_item_bd_1">
											<table class="table-c">
												<tbody>
													<tr>
														<th width="10%">序号</th>
														<th width="25%">车次信息</th>
														<th width="25%">旅客信息</th>
														<th width="15%">票款金额</th>
														<th width="10%">车票状态</th>
														<th width="15%">操作</th>
													</tr>
													<c:forEach items="${order.orderDetail }" var="detail" varStatus="index">
													<tr>
														<td><label>${index.count }</label></td>
														<td><div class="ccxx"><fmt:formatDate value="${order.startTime }" pattern="yyyy-MM-dd HH:mm:ss" /> 开<br>
																${order.ticket.ticketNo } ${order.ticket.startStation }-${order.ticket.endStation }
															</div></td>
														<td title="${detail.passenger.passengerName }">${detail.passenger.passengerName }<br>
																	${detail.passenger.cardNo }
														</td>
														<td>
														<span class="colorA">${detail.orderPrice }</span>元
														</td>
														<td id="flag_${detail.detailId}">
															<c:if test="${detail.detailFlag==1 }">已支付</c:if>
																<c:if test="${detail.detailFlag==2 }">已出行</c:if>
																<c:if test="${detail.detailFlag==3 }">已退票</c:if>
														</td>
														<td id="return_${detail.detailId }">
															<c:if test="${detail.detailFlag==1 }"> 
																<a href="javascript:" onclick="returnTicket('${detail.detailId}');" class="btn92s">退票</a>
															</c:if>
															<c:if test="${detail.detailFlag==1 }"> 
																<a href="javascript:" onclick="gotoTicket('${detail.detailId}');" class="btn92s">出行</a>
															</c:if>
															<c:if test="${detail.detailFlag==2 }"> 
																<a href="javascript:" onclick="deleteTicket('${detail.detailId}');" class="btn92s">删除</a>
															</c:if>
															<c:if test="${detail.detailFlag==3 }"> 
																<a href="javascript:" onclick="deleteTicket('${detail.detailId}');" class="btn92s">删除</a>
															</c:if>
														</td>
													</tr>
													</c:forEach>
													
												</tbody>
											</table>
											<div class="t-foot">
												<span>订单号：<strong>${order.orderId }</strong></span>
											</div>
										</div>
									</div>
								</form>
								</c:forEach>
							</div>
							<!-- 查询出数据结束 -->
							<!--翻页  开始-->
							<c:if test="${page.list!=null }" >
								<div class="page" id="pagination" style="display: block;">
									<span class="btn30 btn92">首页</span><span class="btn30 btn92">上一页</span><span
										class="btn30s">1</span><span class="btn30 btn92">下一页</span><span
										class="btn30 btn92">末页</span>
								</div>
							</c:if>
								<!--翻页  结束-->
						</c:otherwise>
					</c:choose>
	
</body>
</html>